
	var oldlrc;
	var xmlHttp = new XMLHttpRequest();

	//open(method,url,async)
	xmlHttp.open('GET', 'LrcOuter?sName=braveshine', true);
	xmlHttp.send();

	xmlHttp.onreadystatechange = function() {
		if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
			oldlrc = xmlHttp.responseText;
			
			var lrc = eval(oldlrc);
			
			showLrc(lrc);
			
		}
	}
	// lrc  是个JSON格式的 后台处理获得json
	function showLrc(lrc){
		
//		var lrcList = document.getElementById('lrc-list');
		
		for(var i=0;i<lrc.length;i++){
			
//			var np = lrcList.createElement("p");
//			
//			var t = np.createAttribute("data-time")
//			
//			t.nodeValue(lrc[i].time);
//			
//			var c = np.createAttribute("class")
//			
//			c.nodeValue('j-item');
//			
//			np.outerText(lrc[i].words);
			
			if(i<5){
				$('#lrc-list').append('<p class="j-item" data-time="'+lrc[i].time+'">'+lrc[i].words+'</p>');
				continue;
			}
			
			$('#lrc-list').append('<p class="j-item" style="display:none" data-time="'+lrc[i].time+'">'+lrc[i].words+'</p>');
			
		}
	}
	
	
	
	var player = document.getElementById('music-play');
	
	player.ontimeupdate=function(e){
			
			var time = player.currentTime;

			var lrctemp = '';

			var lrcs = document.getElementsByClassName('j-item');
			
			for (var i = 0; i <= lrcs.length - 1; i++) {
				var times = lrcs[i].getAttributeNode('data-time').nodeValue;
				
				if(i>2){
					lrcs[i - 3].style.display = 'none';
					lrcs[i - 2].style.display = 'none';
					
				}
				
				

				if (parseInt(times) >= time && lrctemp != lrcs[i].outerText) {

					lrctemp = lrcs[i].outerText;
					if (i > 0) {

						lrcs[i - 1].style.display = 'block';
						lrcs[i - 1].style.color = 'red';
						lrcs[i - 1].style.fontSize = '20px';
						if (i > 1) {
							
							
							//滚动后变色 字体变小
							lrcs[i - 2].style.display = 'block';
							lrcs[i - 2].style.color = 'black';
							lrcs[i - 2].style.fontSize = '16px';
							
							//上下两行显示
							
							if (i > 2 && i < lrcs.length - 2) {
								lrcs[i - 3].style.fontSize = '14px';
								lrcs[i - 3].style.display = 'block';
								lrcs[i].style.display = 'block';
								lrcs[i].style.fontSize = '16px';
								lrcs[i + 1].style.display = 'block';
								if(i > 3){
									lrcs[i - 4].style.display = 'none';
								}
							}
						}
					}

					break;
				}

			}
		}
	
	